<template>
  <view class="login_container">
    <!-- <headerNav :navRightIcon="false" title="验证码登录" :isShowBg="false" leftIconColor="#fff" /> -->
    <u-icon name="arrow-left" size="18" :style="{top:arrowTop+'px'}" color="#333" class="icon_left" @click="back"></u-icon>
    <!-- <view class="login_title tac">登录懂鲜</view> -->
    <view class="prow76 login_title">
      <view class="phone_input">
        <u--input type="number" color="#262D2C" shape="circle" border="none" placeholder="请输入手机号" v-model="mobile"></u--input>
      </view>
    </view>
    <!-- -->
    <view class="prow76 login-btn">
      <u-button @click="sendCode" class="custom-style-login" text="获取验证码" shape="circle" color="linear-gradient(to right, #57E6BF, #1FB0AC)"></u-button>
    </view>
    <view class="service tac">未注册手机号登录时将自动注册</view>
    <view class="prow30 flex justify-center">
      <userAgreement v-model="isChecked" />
    </view>
    <!-- <loginType loginType="wechat" :isChecked="isChecked" v-if="false" /> -->
  </view>
</template>
<script>
import headerNav from '@/components/headerNav/headerNav.vue'
import loginType from '../components/loginType/index.vue'
import {
  validateNull
} from '@/common'
export default {
  name: 'otherPhoneLogin',
  components: {
    headerNav,
    loginType
  },
  data() {
    return {
      customStyleOtherLogin: {
        height: '48px',
        color: '#262d2c'
      },
      // mobile: '18126495953',
      mobile: '',
      isChecked: true,
      loading: false,
      arrowTop: 0
    };
  },
  async onLoad(options) {
    console.log('%c [ options ]-48', 'font-size:13px; background:pink; color:#bf2c9f;', options)
    this.isChecked = !validateNull(options.isUserAgreeChecked) ? true : false
    console.log('%c [ this.isChecked ]-50', 'font-size:13px; background:pink; color:#bf2c9f;', this.isChecked)
    // #ifdef MP-WEIXIN || APP-PLUS
    let { safeArea: { top: safeAreaTop } } = await uni.getSystemInfoSync();
    this.arrowTop = safeAreaTop + 10
    // #endif
    // #ifdef H5
    this.arrowTop = 15
    // #endif
  },
  onShow() {
    this.loading = false
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1
      });
    },
    checkboxChange(val) {
      this.isChecked = val
    },
    async sendCode() {
      // uni.navigateTo({
      // 	url: '/personal/loginCode/index?mobile=' + this.mobile
      // });
      if (!this.mobile) {
        this.$u.toast('请输入手机号')
        return
      } else if (!this.isChecked) {
        this.$u.toast('请阅读并同意用户协议')
        return
      }
      // uni.navigateTo({
      //   url: '/personal/loginCode/index?mobile=' + this.mobile
      // });
      // return
      if (this.loading) return
      this.loading = true
      let params = {
        mobile: this.mobile,
        event: 'mobilelogin'
      }
      let {
        code,
        data,
        msg
      } = await this.post('api/sms/send', params, true)
      if (+code === 1) {
        this.loading = false
        // this.$u.toast('验证码已发送，请注意查收')
        uni.navigateTo({
          url: '/personal/loginCode/index?mobile=' + this.mobile
        });
      } else {
        this.loading = false
        this.$u.toast(msg)
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.login_container {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-image: url("../../static/my/bg.png");
  background-size: 100% 100%;
  .icon_left {
    position: absolute;
    left: 30rpx;
    top: 30rpx;
    z-index: 11;
  }
  .login_title {
    color: $uni-text-color;
    font-size: 48rpx;
    padding-top: 780rpx;
  }

  .phone_input {
    padding: 30rpx 32rpx;
    background-color: #f6f6f6;
    border-radius: 120rpx;
  }

  .service {
    color: #9b9c9e;
    font-size: 22rpx;
    margin-top: 42rpx;
    margin-bottom: 26rpx;
  }

  .login-btn {
    margin-top: 52rpx;

    .custom-style-login {
      height: 96rpx;
    }

    .custom-style-other-login {
      height: 96rpx;
      color: $uni-text-color !important;
    }
  }

  .text-blue {
    color: #1fb0ad;
  }
}
</style>